<template>
  <div class="app-container">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <el-row>
          <el-button type="success" @click="handleCreate">&emsp;新增&emsp;</el-button>

        </el-row>
      </div>
      <div v-loading="listLoading" class="item">
        <el-table ref="dataList"
                  :data="menuList" :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
                  border row-key="id" style="width:100%;margin-bottom: 20px;"
        >
          <el-table-column label="ID" prop="id"></el-table-column>
          <el-table-column label="音色" prop="name"></el-table-column>
          <el-table-column label="图片" min-width="100px" prop="picture">
            <template slot-scope="scope">
              <!--              <el-popover max-width="220px" placement="right" trigger="hover">-->
              <img v-for="(item, index) in scope.row.picture" :key="index" :src="item" alt="" style="max-width: 200px"/>

              <!--              </el-popover>-->
            </template>
          </el-table-column>

          <el-table-column label="操作" width="260px">
            <template slot-scope="scope">
              <el-button icon="el-icon-edit" plain size="mini"
                         type="primary" @click="handleUpdate(scope.row)"
              >编辑
              </el-button>
              <el-button icon="el-icon-delete" plain
                         size="mini" type="danger" @click="handleDelete(scope.row)"
              >删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <cus-pagination :limit.sync="listQuery.perPage" :page.sync="listQuery.page" :total="total"
                        @pagination="getList"
        />
      </div>
    </el-card>
    <!-- 删除弹框 -->
    <el-dialog :visible.sync="deleteDialogVisible" title="确定删除吗?" width="435px">
      <span><em style="font-style:normal;color:red">删除后不可恢复</em>，你还要继续吗？</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="deleteDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="confirmDelete">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 新增编辑弹框 -->
    <el-dialog v-dialogDrag :title="titleMap[dialogStatus]"
               :visible.sync="dialogFormVisible"
               @close="handleCloseDialog('editRulesForm')"
    >
      <el-form ref="editRulesForm" :model="editRulesForm"
               :rules="editRulesFormRules" class="demo-ruleForm" label-width="120px"
      >
        <el-form-item label="性别" prop="gender">
          <el-select v-model="editRulesForm.gender" clearable filterable placeholder="请选择">
            <el-option v-for="item in options"
                       :key="item.value"
                       :label="item.label"
                       :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="音色" prop="name">
          <el-input v-model="editRulesForm.name" clearable
                    placeholder="请输入音色"
          ></el-input>
        </el-form-item>
        <el-form-item label="昵称" prop="title">
          <el-input v-model="editRulesForm.title" clearable
                    placeholder="请输入昵称"
          ></el-input>
        </el-form-item>
        <el-form-item label="游戏标签" prop="game">
          <el-select v-model="editRulesForm.game" clearable filterable placeholder="请选择">
            <el-option v-for="item in gameTagList"
                       :key="item.value"
                       :label="item.label"
                       :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="所在大区" prop="region">
          <el-select v-model="editRulesForm.region" clearable filterable placeholder="请选择">
            <el-option v-for="item in regionList"
                       :key="item.value"
                       :label="item.label"
                       :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="图片" prop="picture">
          <el-upload
            :http-request="customizeUpload"
            :limit="4"
            :on-remove="handleRemove"
            :on-success="handleSuccess"
            :show-file-list="false"
            action=""
            class="avatar-uploader"
          >
            <section v-if="editRulesForm.picture">
              <section v-for="(item,index) in editRulesForm.picture" :key="index" class="img-box">
                <img
                  :src="item"
                  class="avatar"
                />
                <section class="wrap" @click.stop="delImg(index)">
                  <span class="del">删除</span>
                </section>
              </section>
            </section>
            <i class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>

        <!--        <el-form-item label="视频" prop="content">-->
        <!--          <el-upload-->
        <!--            :http-request="customizeUploadVideo"-->
        <!--            :on-remove="handleRemove2"-->
        <!--            :on-success="handleSuccess2"-->
        <!--            :show-file-list="false"-->
        <!--            action=""-->
        <!--            class="avatar-uploader"-->
        <!--          >-->
        <!--            <video-->
        <!--              v-if="editRulesForm.content"-->
        <!--              :src="editRulesForm.content"-->
        <!--              controls-->
        <!--              style="max-width: 200px;max-height: 300px"-->
        <!--            ></video>-->
        <!--            <i v-else class="el-icon-plus avatar-uploader-icon"></i>-->
        <!--          </el-upload>-->
        <!--        </el-form-item>-->

        <el-form-item label="音频" prop="voice">
          <el-upload
            :http-request="customizeUploadAudio"
            :on-remove="handleRemove3"
            :on-success="handleSuccess3"
            :show-file-list="false"
            action=""
            class="avatar-uploader"
          >
            <!--            <video-->
            <!--              v-if="editRulesForm.voice"-->
            <!--              :src="editRulesForm.voice"-->
            <!--              controls-->
            <!--              style="max-width: 300px"-->
            <!--            ></video>-->
            <!--            <i v-else class="el-icon-plus avatar-uploader-icon"></i>-->


            <i class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
          <section v-if="editRulesForm.voice">
            <section v-for="(item,index) in editRulesForm.voice" :key="index" class="voice-box">
              <audio
                :src="item"
                controls
              />
              <el-button circle icon="el-icon-delete" type="danger" @click.stop="delVoice(index)"></el-button>

            </section>
          </section>
        </el-form-item>
        <el-form-item label="方言音频" prop="dialect_voice">
          <el-upload
            :http-request="customizeUploadAudio"
            :on-remove="handleRemove4"
            :on-success="handleSuccess4"
            :show-file-list="false"
            action=""
            class="avatar-uploader"
          >
            <i class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
          <section v-if="editRulesForm.dialect_voice">
            <section v-for="(item,index) in editRulesForm.dialect_voice" :key="index" class="voice-box">
              <audio
                :src="item"
                controls
              />
              <el-button circle icon="el-icon-delete" type="danger" @click.stop="delVoice2(index)"></el-button>
            </section>

          </section>
        </el-form-item>

        <el-form-item>
          <el-button @click="dialogFormVisible = false">返回</el-button>
          <el-button type="primary" @click="submitForm('editRulesForm')">提交</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import { addSound, delSound, editSound, listData } from '../../api/connectLine/soundStyle'

export default {
  data() {
    return {

      confirmBtn: false,
      giveShowDetailPicture: [],
      giveShowPicture: [],
      // token值

      displayOptions: [
        { value: 0, label: '隐藏' },
        { value: 1, label: '显示' }
      ],
      adType: [
        { value: 1, label: '房间' },
        { value: 3, label: '外部链接' },
        { value: 5, label: 'H5' },
        { value: 8, label: '商城上新推荐' },
        { value: 6, label: '无操作' }
      ],
      // 要修改的当前行的idsearchSubmit
      row_id: 0,
      // 表单规则
      editRulesFormRules: {
        gender: [{ required: true, message: '请选择性别', trigger: 'change' }],
        name: [{ required: true, message: '请输入音色', trigger: 'blur' }],
        // content: [{ required: true, message: '请选择视频', trigger: 'change' }],
        picture: [{ required: true, message: '请选择图片', trigger: 'change' }],
        title: [{ required: true, message: '请输入昵称', trigger: 'change' }]
        // voice: [{ required: true, message: '请选择音频', trigger: 'change' }]

      },
      editRulesForm: {
        picture: [],
        gender: undefined,
        name: undefined,
        content: undefined,
        voice: [],
        region: 1,
        game: 1,
        dialect_voice: [],
        title: undefined
      },
      dialogStatus: '',
      // dialog的头部信息
      titleMap: {
        update: '编辑',
        create: '新增'
      },
      dialogFormVisible: false,
      deleteDialogVisible: false,
      listLoading: false,
      menuList: [],
      limitList: [],
      listQuery: {
        page: 1,
        perPage: 10
      },
      total: 0,
      // 要删除的内容的ids
      options: [
        {
          label: '男',
          value: 1
        },
        {
          label: '女',
          value: 2
        }
      ],
      gameTagList: [
        {
          label: '王者荣耀',
          value: 1
        },
        {
          label: '和平精英',
          value: 2
        }
      ],
      regionList: [
        {
          label: '微信区',
          value: 1
        },
        {
          label: 'QQ区',
          value: 2
        }
      ],
      skippArr: [],
      fileList: []
    }
  },
  created() {
    this.getList()
    // this.getBannerSkip()
  },
  methods: {
    delImg(index) {
      this.editRulesForm.picture = this.editRulesForm.picture.filter((item, index2) => index !== index2)
    },
    delVoice(index) {
      this.editRulesForm.voice = this.editRulesForm.voice.filter((item, index2) => index !== index2)
    },
    delVoice2(index) {
      this.editRulesForm.voice = this.editRulesForm.voice.filter((item, index2) => index !== index2)
    },
    getList() {
      this.listLoading = true
      listData(this.listQuery).then(response => {
        this.menuList = response.data.list
        this.total = response.data.total
        this.listLoading = false
        this.confirmBtn = false
      })
    },
    // 图片删除
    handleRemove(file, fileList) {
      console.log(this.editRulesForm.picture)
      // this.editRulesForm.picture = ''
    },
    // 视频删除
    handleRemove2(file, fileList) {
      this.editRulesForm.content = ''
      this.giveShowPicture = []
    },
    // 视频删除
    handleRemove3(file, fileList) {
      this.editRulesForm.voice = ''
    },
    handleRemove4(file, fileList) {
      this.editRulesForm.dialect_voice = []
    },
    handleSuccess() {
      // this.editRulesForm.picture = this.ossLastImgUrl
      this.editRulesForm.picture.push(this.ossLastImgUrl)
      console.log(this.editRulesForm.picture)
    },
    handleSuccess2() {
      this.editRulesForm.content = this.ossLastImgUrl
      console.log(this.editRulesForm)
    },
    handleSuccess3() {
      // this.editRulesForm.voice = this.ossLastImgUrl
      this.editRulesForm.voice.push(this.ossLastImgUrl)
      console.log(this.editRulesForm)
    },
    handleSuccess4() {
      this.editRulesForm.dialect_voice.push(this.ossLastImgUrl)
    },
    handleChangeType() {
      this.editRulesForm.item_id = undefined
      this.editRulesForm.link_url = ''
    },
    // 点击新增
    handleCreate() {
      this.resetForm('editRulesForm')
      this.dialogStatus = 'create'
      this.dialogFormVisible = true
      this.fileList = []
    },
    // 点击编辑
    handleUpdate(row) {
      this.row_id = row.id
      this.editRulesForm.picture = row.picture
      this.editRulesForm.name = row.name || ''
      this.editRulesForm.content = row.content || ''
      this.editRulesForm.voice = row.voice || ''
      this.editRulesForm.gender = row.gender || ''
      this.editRulesForm.game = row.game || ''
      this.editRulesForm.region = row.region || ''
      this.editRulesForm.dialect_voice = row.dialect_voice || []
      this.editRulesForm.title = row.title || ''

      this.fileList = [{ url: this.editRulesForm.voice }]
      this.dialogStatus = 'update'
      this.dialogFormVisible = true
    },
    handleCloseDialog(formName) {
      if (this.$refs[formName]) {
        this.$refs[formName].clearValidate() // 清除整个表单的校验
        // this.$refs[formName].resetFields()
      }
    },

    // 重置表单内容
    resetForm(formName) {
      this.$nextTick(() => {
        if (this.$refs[formName] !== undefined) {
          this.$refs[formName].resetFields()
        }
        this.cityList = []
        this.editRulesForm = {
          picture: [],
          gender: undefined,
          name: undefined,
          content: undefined,
          voice: [],
          game: 1,
          region: 1,
          dialect_voice: [],
          title: undefined

        }
      })
    },
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          if (this.dialogStatus === 'create') {
            let obj = {}
            for (let key in this.editRulesForm) {
              if (this.editRulesForm[key] !== undefined && this.editRulesForm[key] !== '') {
                obj[key] = this.editRulesForm[key]
              }
            }

            addSound(obj).then(response => {
              if (response.code === 200) {
                this.getList()
                this.dialogFormVisible = false
                this.$notify({
                  type: 'success',
                  message: '操作成功',
                  position: 'bottom-right',
                  showClose: false,
                  duration: 3000
                })
              }
            })
          } else {
            let obj = {}
            for (let key in this.editRulesForm) {
              if (this.editRulesForm[key] !== undefined && this.editRulesForm[key] !== '') {
                obj[key] = this.editRulesForm[key]
              }
            }
            obj.id = this.row_id
            editSound(obj).then(response => {
              if (response.code === 200) {
                this.getList()
                this.dialogFormVisible = false
                this.$notify({
                  type: 'success',
                  message: '操作成功',
                  position: 'bottom-right',
                  showClose: false,
                  duration: 3000
                })
              }
            })
          }
        } else {
          return false
        }
      })
    },
    // 点击单个删除
    handleDelete(row) {
      this.dataIds = { ids: `${row.id}` }
      this.deleteDialogVisible = true
    },
    confirmDelete() {
      if (this.confirmBtn) return
      this.confirmBtn = true
      delSound(this.dataIds).then(response => {
        if (response.code === 200) {
          this.getList()
          this.deleteDialogVisible = false
          this.$notify({
            type: 'success',
            message: '操作成功',
            position: 'bottom-right',
            showClose: false,
            duration: 3000
          })
        } else {
          this.confirmBtn = false
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
[v-cloak] {
  display : none;
}

.clearfix:before,
.clearfix:after {
  display : table;
  content : "";
}

.clearfix:after {
  clear : both;
}

.box-card {
  width : 100%;
}

.demo-form-inline {
  float : right;
}

/deep/ .el-card__header {
  padding-bottom : 0;
}

::v-deep .el-upload-list__item {
  transition : none !important;
}

::v-deep.avatar-uploader .el-upload {
  border        : 1px dashed #d9d9d9;
  border-radius : 6px;
  cursor        : pointer;
  position      : relative;
  overflow      : hidden;
}

.avatar-uploader .el-upload:hover {
  border-color : #409eff;
}

.avatar-uploader-icon {
  font-size   : 28px;
  color       : #8c939d;
  width       : 100px;
  height      : 100px;
  line-height : 100px;
  text-align  : center;
}

.voice-box {
  display     : flex;
  align-items : center;
}

.img-box {
  position : relative;
  width    : 100px;
  height   : 100px;

  .avatar {
    width  : 100%;
    height : 100%;
  }

  &:hover {
    .wrap {
      display : block;
    }
  }

  .wrap {
    display          : none;
    position         : absolute;
    top              : 0;
    left             : 0;
    width            : 100px;
    height           : 100px;
    background-color : #3A3A3A;

    .del {
      color     : #FFFFFF;
      position  : absolute;
      top       : 50%;
      left      : 50%;
      transform : translate(-50%, -50%);
    }

  }


}
</style>
